<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
            <div class="title">
              <span class="title-text">诚德口罩有限公司协同管理平台</span>
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width:3.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width:2.5rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
        </div>

        <!-- 时间 -->
        <span class="timetext">{{dateYear}} {{dateWeek}} {{dateDay}}</span>

        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="left-bigbox">
            <!-- 监控 -->
             <div class="left_top">
               <div class="left_top1">
                 <div class="titleMv1">监控1</div>
                 <div class="Mv1">
                   111
                 </div>
               </div>
               <div class="left_top2">
                 <div class="titleMv2">监控2</div>
                 <div class="Mv2">
                   222
                 </div>
               </div>
             </div>
             <div class="left_middle">
                 <!-- 一周日产量 -->
                 <div class="left_middle1">
                   <leftmiddle1></leftmiddle1>
                 </div>
                 <!-- 一周设备日开动率 -->
                 <div class="left_middle2">
                   <leftmiddle2></leftmiddle2>
                 </div>
             </div>
             <div class="left_bottom">
                 <!-- 半年月产量 -->
                 <div class="left_bottom1">
                   <leftbottom1></leftbottom1>
                 </div>
                 <!-- 总产量趋势图 -->
                 <div class="left_bottom2">
                   <leftbottom2></leftbottom2>

                 </div>
             </div>
          </div>

          <!-- 第四行数据 -->
          <div class="right-bigbox">
            <!-- 设备警报 -->
            <div class="right_top"></div>
            <!-- 设备运行状态 -->
            <div class="right_bottom"></div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { formatTime } from '../utils/index.js'
import leftmiddle1 from "./leftmiddle1";
import leftmiddle2 from "./leftmiddle2";
import leftbottom1 from "./leftbottom1";
import leftbottom2 from "./leftbottom2";

// import centerLeft1 from "./centerLeft1";
// import centerLeft2 from "./centerLeft2";
// import centerRight1 from "./centerRight1";
// import centerRight2 from "./centerRight2";
// import center from "./center";
// import bottomLeft from "./bottomLeft";
// import bottomRight from "./bottomRight";
export default {
  data () {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  components: {
    leftmiddle1,
    leftmiddle2,
    leftbottom1,
    leftbottom2,
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    this.timeFn();
    this.cancelLoading();
  },
  methods: {
    timeFn () {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
</style>